<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .searchBox{
            width: 40%;
            margin: 50px 460px 10px;
        }
        .searchCon{
            width: 80%;
            height: 35px;
            font-size: 18px;
            background-color: rgba(211, 228, 241, 0.6);
            border-radius: 8px;
        }
        .searchBtn{
            width: 10%;
            height: 38px;
            background-color: rgba(100, 173, 233, 0.6);
            font-size: 18px;
            border-radius: 8px;
            cursor: pointer;
        }
        .searchList li{
            width: 32%;
            margin: 0 460px;
            list-style: none;
            font-size: 18px;
            line-height: 40px;
            border: 1px solid rgb(151, 148, 148);
            text-indent: 16px;
            overflow: hidden;
            border-radius: 3px;
            background-color: rgba(211, 228, 241, 0.6);
        }
        a{
            text-decoration: none;
            color: inherit;
        }
        li:hover{
            background-color: rgb(100, 173, 233);
        }
    </style>
</head>
<body>
    <div class="wrap w">
        <div class="searchBox">
            <input class="searchCon" type="text">
            <input type="button" value="搜索" class="searchBtn">
        </div>
        <ul class="searchList">
            <!-- <li><a href="#"> 0000</a></li>
            <li><a href="#"> 0000</a></li>
            <li><a href="#"> 0000</a></li>
            <li><a href="#"> 0000</a></li> -->
        </ul>
    </div>
    
</body>
<script>
    var searchList = document.getElementsByClassName("searchList")[0];
    var searchCon = document.getElementsByClassName("searchCon")[0];

    // 随机函数名
        var fnName = "Jsonp" + String(Math.random()).substr(2);
        console.log(fnName);
    
    function fn (data) {
        var html = "";
       var {g} = data;
       g.forEach(({q}) => {
           html +=`<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=${q}">${q}</a></li>`;
       });    
       searchList.innerHTML = html;
    }


    searchCon.oninput = function() {
        key = this.value.trim();
        // 每次搜索时，新创建一个script标签,进行jsonp请求
        var script = document.createElement("script");
        script.src = `https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=${key}&cb=fn`;
        document.body.appendChild(script);
    }


</script>
<!-- <script src="https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=${key}&cb=fn"> -->
    <!-- // prod    PC
    // wd      关键字
    // cb      回调函数的函数名 -->

</script>
</html>